/**
* 人员档案列表
*/
<template>
	<vp-main-page @refresh="loadDataList">
		<template #search>
			<el-form ref="searchFormRef" :model="searchForm" @submit.prevent @keyup.enter="loadDataList"
				label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item field="keyword">
							<template #label><vp-label zh="姓名" en="Name" /></template>
							<el-input v-model="searchForm.keyword" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item field="zzzt">
							<template #label><vp-label zh="在职状态" en="Employed Status" /></template>
							<el-select class="w100" v-model="searchForm.zzzt" placeholder="请选择/Please Choose" clearable
								collapse-tags>
								<el-option :value="10" label="在职/Employed"></el-option>
								<el-option :value="20" label="离职/Unemployed"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item field="jdidList">
							<template #label><vp-label zh="基地" en="Base" /></template>
							<VpBaseSelectTreeMulit v-model:value="searchForm.jdidList" @treeSelected="handleBaseSelected" class="w100">
							</VpBaseSelectTreeMulit>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item field="rzrqDateList">
							<template #label><vp-label zh="入职日期" en="Employment Date" /></template>
							<el-date-picker v-model="searchForm.rzrqDateList" type="daterange"
								start-placeholder="开始日期/Start Date" end-placeholder="结束日期/End Date"
								value-format="YYYY-MM-DD" unlink-panels range-separator="-" style="width: 100%">
							</el-date-picker>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item field="cjgzrqDateList">
							<template #label><vp-label zh="参加工作日期" en="Start Work Date" /></template>
							<el-date-picker v-model="searchForm.cjgzrqDateList" type="daterange"
								start-placeholder="开始日期/Start Date" end-placeholder="结束日期/End Date"
								value-format="YYYY-MM-DD" unlink-panels range-separator="-" style="width: 100%">
							</el-date-picker>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item field="xb">
							<template #label><vp-label zh="性别" en="Gender" /></template>
							<el-select class="w100" v-model="searchForm.xb" placeholder="请选择/Please Choose" clearable
								collapse-tags>
								<el-option :value="10" label="男/Male"></el-option>
								<el-option :value="20" label="女/Female"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item field="hyzk">
							<template #label><vp-label zh="婚姻状况" en="Marital status" /></template>
							<el-select class="w100" v-model="searchForm.hyzk" placeholder="请选择/Please Choose" clearable
								collapse-tags>
								<el-option :value="10" label="已婚/Married"></el-option>
								<el-option :value="20" label="未婚/Single"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item field="nwbs">
							<template #label><vp-label zh="内外" en="Int./Ext." /></template>
							<el-select class="w100" v-model="searchForm.nwbs" placeholder="请选择/Please Choose" clearable
								collapse-tags>
								<el-option :value="10" label="内/Int."></el-option>
								<el-option :value="20" label="外/Ext."></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item field="jxQxList">
							<template #label><vp-label zh="机型签署" en="AC  Type Endorsement" /></template>
							<BasedataModelSelectDialog v-model:value="searchForm.jxQxList"
								@basedataModelSelected="basedataModelSelectedQxHandle" />
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item field="jxPxList">
							<template #label><vp-label zh="机型培训" en="AC Type Training" /></template>
							<BasedataModelSelectDialog v-model:value="searchForm.jxPxList"
								@basedataModelSelected="basedataModelSelectedPxHandle" />
						</el-form-item>
					</vp-search-col>

					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList" />
						<vp-btn-reset @click="handleSearchReset" />
						<vp-btn-more @change="showMore = $event" />
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<vp-btn-add v-auth="'trainingPersonnelFile.edit'" @click="handleAdd" />
			<vp-btn v-auth="'trainingPersonnelFile.import'" @click="handleTips()"><vp-label zh="导入" en="Import" /></vp-btn>
			<vp-btn v-auth="'trainingPersonnelFile.export'" @click="handleTips()"><vp-label zh="导出" en="Export" /></vp-btn>
		</template>
		<template #table>
			<vp-vxe-table ref="tableRef" :data="tableData" row-key="id" v-loading="loading">
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column field="operation" title="操作 Operations" width="170px">
					<template #header><vp-label-operations /></template>
					<template #default="scope">
						<el-space>
							<vp-btn-edit text v-auth="'trainingPersonnelFile.edit'" @click="handleEdit(scope.row)" />
							<vp-btn-edit  v-auth="'trainingPersonnelFile.edit4Qulity'" @click="handleEditQulity(scope.row)" />
							<vp-btn text @click="handleView(scope.row)"><vp-label zh="查看" en="View" /></vp-btn>
							<vp-btn-del text v-auth="'trainingPersonnelFile.edit'" @click="handleDelete(scope.row)" />
							<vp-btn text @click="handleTips()"><vp-label zh="打印" en="Print" /></vp-btn>
						</el-space>
					</template>
				</vxe-column>
				<vxe-column field="bh" show-overflow width="60px">
					<template #header><vp-label zh="编号" en="No." /></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.bh)" />
					</template>
				</vxe-column>
				<vxe-column field="xm" show-overflow width="60px">
					<template #header><vp-label zh="姓名" en="Name" /></template>
					<template #default="scope">
						<span v-html="markTextColor(searchForm.keyword, scope.row.xm)" />
					</template>
				</vxe-column>
				<vxe-column field="xb" show-overflow width="80px">
					<template #header><vp-label zh="性别" en="Gender" /></template>
					<template #default="scope">
						{{ scope.row.xb === 10 ? '男/Male' : (scope.row.xb === 20 ? '女/Female' : '') }}
					</template>
				</vxe-column>
				<vxe-column field="eduXy" show-overflow width="120px">
					<template #header><vp-label zh="毕业院校" en="Graduate School" /></template>
				</vxe-column>
				<vxe-column field="xl" show-overflow width="120px">
					<template #header><vp-label zh="学历" en="Edu. Lv." /></template>
				</vxe-column>
				<vxe-column field="xw" show-overflow width="120px">
					<template #header><vp-label zh="学位" en="Degree" /></template>
				</vxe-column>
				<vxe-column field="eduZy" show-overflow width="120px">
					<template #header><vp-label zh="专业" en="Major" /></template>
				</vxe-column>
				<vxe-column field="baseLicenseYydj" show-overflow width="140px">
					<template #header><vp-label zh="技术英语等级" en="Tech. Eng. Lv." /></template>
				</vxe-column>
				<vxe-column field="yydj" show-overflow width="140px">
					<template #header><vp-label zh="公共英语等级" en="Public  Eng. Lv." /></template>
				</vxe-column>
				<vxe-column field="rhrq" show-overflow width="120px">
					<template #header><vp-label zh="入行日期" en="Industry Entry Date" /></template>
				</vxe-column>
				<vxe-column field="rzrq" show-overflow width="140px">
					<template #header><vp-label zh="入职日期" en="Employment Date" /></template>
				</vxe-column>
				<vxe-column field="csrq" show-overflow width="120px">
					<template #header><vp-label zh="出生日期" en="Birthday" /></template>
				</vxe-column>
				<vxe-column show-overflow width="60px">
					<template #header><vp-label zh="年龄" en="Age" /></template>
					<template #default="scope">
						{{ getYear(scope.row.csrq) }}年
					</template>
				</vxe-column>
				<vxe-column show-overflow width="170px">
					<template #header><vp-label zh="维修经历" en="Maint. Exp." /></template>
					<template #default="scope">
						{{ getYear(scope.row.rhrq) }}年
					</template>
				</vxe-column>
				<vxe-column field="zc" show-overflow width="130px">
					<template #header><vp-label zh="职称" en="Prof. Title" /></template>
				</vxe-column>
				<vxe-column field="bm" show-overflow width="120px">
					<template #header><vp-label zh="部门" en="Dept." /></template>
				</vxe-column>
				<vxe-column field="xrzw" show-overflow width="120px">
					<template #header><vp-label zh="现任职务" en="Curr. Position" /></template>
				</vxe-column>
				<vxe-column field="baseLicenseZzh" show-overflow width="160px">
					<template #header><vp-label zh="维修人员执照编号" en="Maint. License No." /></template>
				</vxe-column>
				<vxe-column field="baseLicenseLb" show-overflow width="130px">
					<template #header><vp-label zh="执照专业代码" en="License Prof. Code" /></template>
				</vxe-column>
				<vxe-column field="jxPx" show-overflow width="120px">
					<template #header><vp-label zh="机型培训" en="AC Type Training" /></template>
				</vxe-column>
				<vxe-column field="jxQs" show-overflow width="120px">
					<template #header><vp-label zh="机型签署" en="AC  Type Endorsement" /></template>
				</vxe-column>
				<vxe-column field="workStyleKfSum" show-overflow width="130px">
					<template #header><vp-label zh="作风量化考核" en="WSQA" /></template>
				</vxe-column>
			</vp-vxe-table>
		</template>
		<template #pagination>
			<vp-pagination @change="loadDataList" :total="page.total" v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize">
			</vp-pagination>
		</template>
		<EditPersonnelFile ref="editPersonnelFileRef" @formSubmited="handleFormSubmited"></EditPersonnelFile>
		<EditPersonnelFileQulity ref="editPersonnelFileQulityRef" @formSubmited="handleFormSubmited"></EditPersonnelFileQulity>
	</vp-main-page>
</template>

<script setup lang="ts" name="trainingPersonnelFile">
import { ref, reactive, onMounted, defineAsyncComponent } from 'vue';
import request from '/@/utils/request';
import { markTextColor } from '/@/utils/toolsValidate';
import { DEFAULT_PAGE } from '/@/utils/page';
import VpMessageBox from '/@/components/vp/VpMessageBox';
import router from '/@/router';
import VpBaseSelectTreeMulit from '/@/components/vp/base/VpBaseSelectTreeMulit.vue';
import BasedataModelSelectDialog from '/@/components/vp/basedata/basedataModelSelectDialog.vue';

const EditPersonnelFile = defineAsyncComponent(() => import('./component/EditPersonnelFile.vue'));
const EditPersonnelFileQulity = defineAsyncComponent(() => import('./component/EditPersonnelFileQulity.vue'));

import { ElMessage } from 'element-plus'

const searchForm = reactive({
	keyword: "",
	zzzt: "",
	jdidList: [],
	rzrqDateList: [],
	cjgzrqDateList: [],
	xb: '',
	hyzk: '',
	nwbs: '',
	jxQxList: [],
	jxPxList: []
});

const page = reactive({
	...DEFAULT_PAGE,
})

const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

// 加载列表数据
const loadDataList = () => {
	loading.value = true
	request.get('/training/personnelFile/queryPage', {
		params: {
			...searchForm,
			...page,
		}
	}).then(res => {
		tableData.value = res?.data?.list || []
		page.total = res?.data?.total || 0
		page.pageNum = res?.data?.pageNum || 1
	}).finally(() => {
		loading.value = false
	})
}

const searchFormRef = ref();

// 重置搜索条件
const handleSearchReset = () => {
	searchForm.keyword = '';
	searchForm.zzzt = '';
	searchForm.jdidList = [];
	searchForm.rzrqDateList = [];
	searchForm.cjgzrqDateList = [];
	searchForm.xb = '';
	searchForm.hyzk = '';
	searchForm.nwbs = '';
	searchForm.jxQxList = [];
	searchForm.jxPxList = [];

	searchFormRef.value.resetFields();

	loadDataList()
}

// 组件挂载后事件
onMounted(() => {
	loadDataList()
})

const editPersonnelFileRef = ref();
// 新增
const handleAdd = () => {
	editPersonnelFileRef.value.handleOpen('add');
}

// 修改
const handleEdit = (row: any) => {
	editPersonnelFileRef.value.handleOpen('edit', row.id);
}

const editPersonnelFileQulityRef=ref();
const handleEditQulity = (row: any) => {
	editPersonnelFileQulityRef.value.handleOpen('editQulity', row.id);
}

const handleView = (row: any) => {
	router.push({
		name: "viewTrainingPersonnelFile",
		params: {
			id: row.id,
		},
	})
}

// 表单完成后回调事件
const handleFormSubmited = (data: any) => {
	loadDataList()
}

const handleTips = () => {
	ElMessage.info("功能正在开发中")
}

// 删除
const handleDelete = (row: any) => {
	VpMessageBox.confirmDelete().then(() => {
		request.delete(`/training/personnelFile/${row.id}`).then(res => {
			loadDataList();
		})
	});
}

const handleBaseSelected = (data: any) => {
	searchForm.jdidList = data;
}

const basedataModelSelectedQxHandle = (data: any) => {
	searchForm.jxQxList = data;
}

const basedataModelSelectedPxHandle = (data: any) => {
	searchForm.jxPxList = data;
}

const getYear = (rxrq: string) => {
	if (rxrq) {
		const date = new Date(rxrq);
		const now = new Date();
		const diff = now.getTime() - date.getTime();
		const year = Math.floor(diff / (1000 * 60 * 60 * 24 * 365));
		if (year < 0) {
			return 0;
		} else {
			return year;
		}
	}
}

const tableRef = ref();

</script>

<style lang="scss" scoped></style>